<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="text-align: left;">
          <span>剩余积分&nbsp;<span style="font-size:24px;color:red">{{score}}积分</span></span>
        </div>
        <el-row :gutter="20">
          <el-col style="margin-top:20px;" :xs="12" :sm="6" :md="6" v-for="(item,index) in cardAry" :key="index">
            <div class="grid-content bg-purple">
              <!-- <div style="font-size:18px;"> {{item.time}}天</div> -->
              <img :src="item.img" alt="天" style="width:150px">
            </div>
            <br>
            <el-button type="danger" @click="change(item)">兑换<span style="font-size:12px;">({{item.time*50}}积分)</span></el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  import {
    fieldMap,
    publicFilter
  } from "@/utils/showMap";
  import {
    setUser,
    getUser,
    removeUser
  } from "@/utils/auth";
  import {
    MessageBox,
    Message
  } from "element-ui";
  import store from "@/store";

  import {
    recharge,
    getUserInfo,
    exchange
  } from "@/api/service";
  export default {
    data() {
      return {
        score: 0,
        cardAry: [{
          time: 1,
          img: '../../../static/images/vip1.png',
          score: 50
        }, {
          time: 2,
          score: 100,
          img: '../../../static/images/vip2.png',
        }, {
          time: 5,
          score: 150,
          img: '../../../static/images/vip5.png',
        }, {
          time: 10,
          score: 200,
          img: '../../../static/images/vip10.png',
        }],
        ruleForm: {
          code: "",
        },
        rules: {
          code: [{
            required: true,
            message: "请输入充值卡号",
            trigger: "blur"
          }, ]
        },
      };
    },
    mounted() {
      this.search()
    },
    methods: {
      search(args = "me") {
        getUserInfo(args).then((res) => {
          if (res.status == 200) this.score = res.data.score;

        });
      },
      change(args) {
        console.log(args);
        let obj = {
          amount: args.time , //要兑换的数量
          productType: 1 //商品类型 1会员天数
        }
        exchange(obj).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.search();
            Message({
              message: "兑换成功",
              type: "success",
              duration: 5 * 1000,
            });
          } else {
            Message({
              message: res.msg || "积分不足",
              type: "error",
              duration: 5 * 1000,
            });
          }
        })
      }
    },
  };
</script>
<style lang="less" scoped>
  .demo-ruleForm {
    text-align: left;
  }
</style>
